<template>
  <div>
    <!-- 主表内容 -->
    <el-table v-loading="dataListLoading" ref="Table" class="purchaseTable" :row-key="getRowKey" :data="tableData"
      border style="width: 100%" @selection-change="dataListSelectionChangeHandle" @select="selectChangeHandle">
      <el-table-column v-if="showSelection" type="selection" header-align="center" align="center"
        width="50"></el-table-column>
      <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop"
        :label="item.label || $t('handle')" :width="item.width" :min-width="item.minWidth"
        :header-align="item.headerAlign || 'center'" :align="item.align || 'center'" :fixed="item.fixed || false"
        :sortable="item.sortable || false" show-overflow-tooltip>
        <template slot-scope="scope">
          <template v-if="item.type === 'locateStatus'">
            <el-tag size="small" v-if="scope.row[item.prop] == 0">空闲</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] == 1" type="warning">预分配</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] == 2" type="success">已使用</el-tag>
            <el-tag size="small" v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'changeStatus'">
            <el-switch v-model="scope.row[item.prop]" @change="changeStatus($event, scope.row)" active-color="#13ce66"
              inactive-color="#ff4949" :active-value="0" :inactive-value="1"></el-switch>
          </template>
          <template v-else-if="item.type === 'changeLockSt'">
            <el-switch v-model="scope.row[item.prop]" @change="changeLockSt($event, scope.row)" active-color="#13ce66"
              inactive-color="#ff4949" :active-value="0" :inactive-value="1"></el-switch>
          </template>
          <template v-else-if="item.type === 'trkType'">
            <el-tag v-if="scope.row[item.prop] == 'IN'" type="info">入库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] == 'OT'" type="info">出库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] == 'MV'" type="info">移动</el-tag>
            <el-tag v-else type="danger">未知</el-tag>
          </template>
          <template v-else-if="item.type === 'trkStatus'">
            <el-tag v-if="scope.row[item.prop] === 0">初始</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 1" type="info">执行中</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 2" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 9" type="warning">取消</el-tag>
            <el-tag v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'agvStatus'">
            <el-tag v-if="scope.row[item.prop] === 0">初始</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 1" type="warning">已下发</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 2" type="info">发车中</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 3" type="info">搬送中</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 31" type="success">取申请</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 32" type="success">取完成</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 33" type="success">放申请</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 34" type="danger">放完成</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 4" type="info">已完成</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 9" type="info">异常</el-tag>
            <el-tag v-else type="danger">未知</el-tag>
          </template>
          <template v-else-if="item.type === 'useStatus'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0" type="success">可用</el-tag>
            <el-tag size="small" v-else type="warning">不可用</el-tag>
          </template>
          <template v-else-if="item.type === 'handle'">
            <template v-if="item.handleType === 'handle-2'">
              <el-button v-if="!item.permissionName || $hasPermission(`wcs:${item.permissionName}:update`)" type="text"
                size="small" @click="addOrUpdateHandle(scope.row[item.id])">{{ $t("update") }}</el-button>
              <el-button v-if="!item.permissionName || $hasPermission(`wcs:${item.permissionName}:delete`)" type="text"
                size="small" @click="deleteHandle(scope.row[item.id])">{{ $t("delete") }}</el-button>
            </template>
            <template v-else>
              <el-button v-if="!item.permissionName || $hasPermission(`wcs:${item.permissionName}:update`)" type="text"
                size="small" @click="addOrUpdateHandle(scope.row[item.id])">{{ $t("update") }}</el-button>
            </template>
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[50, 100, 500, 1000]" :page-size="limit" :total="total"
      layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    moduleOptions: {
      type: Object,
      default: () => { }
    },
    showSelection: {
      type: Boolean,
      default: false
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 1
    },
    dataListLoading: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    moduleOptions: {
      handler(val) {
        this.mixinViewModuleOptions = { ...val }
      },
      immediate: true
    },
  },
  computed: {

  },
  data() {
    return {
      advanced: false,
      mixinViewModuleOptions: {
        createdIsNeed: true,       // 此页面是否在创建时，调用查询数据列表接口？
        activatedIsNeed: false,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
        getDataListURL: '',       // 数据列表接口，API地址
        getDataListIsPage: false, // 数据列表接口，是否需要分页？
        deleteURL: '',            // 删除接口，API地址
        deleteIsBatch: false,     // 删除接口，是否需要批量？
        deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        exportURL: ''             // 导出接口，API地址
      },
      expands: [],
      getRowKey(row) {
        return row.detailId || row.purchaseId || row.spuId;
      },
      num: 0
    }
  },
  methods: {
    pageSizeChangeHandle(val) {
      this.$emit('pageSizeChangeHandle', val)
    },
    pageCurrentChangeHandle(val) {
      this.$emit('pageCurrentChangeHandle', val)
    },
    // 按钮操作
    // opreate(row) {
    //   this.$emit('opreate', row)
    // },
    selectChangeHandle(selection, row) {
      this.$emit('selectChangeHandle', selection, row)
    },
    addOrUpdateHandle(rowId) {
      this.$emit('addOrUpdateHandle', rowId)
    },
    deleteHandle(row) {
      this.$emit('deleteHandle', row)
    },
    dataListSelectionChangeHandle(val) {
      this.$emit('dataListSelectionChangeHandle', val)
    },
    changeStatus(e, row) {
      this.$emit('changeStatus', e, row)
    },
    changeLockSt(e, row) {
      this.$emit('changeLockSt', e, row)
    },
    moveStockHandle(e, row) {
      this.$emit('moveStockHandle', e, row)
    },
    moveAutoHandle(row) {
      this.$emit('moveAutoHandle', row)
    },
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>